<template>
  <div class="home-container">
    <Header :scroll="scroll"></Header>

    <!-- 产品展示区域 -->
    <div class="product-showcase">
      <div class="container">
        <div class="showcase-content">
          <!-- 左侧产品分类菜单 -->
          <div class="category-menu" v-if="!isMobile">
            <div class="category-item" v-for="(category, index) in productCategories" :key="index" @click="switchCategories(index)">
              <span class="category-name">{{ category.group_name }}</span>
              <span class="category-arrow">></span>
            </div>
          </div>

          <!-- 右侧产品展示 -->
          <div class="carousel-container">
            <el-carousel height="533px" class="main-carousel" type="card">
              <el-carousel-item v-for="item in lunboProducts" :key="item.id" class="carousel-item2" @click="toDetail(item)">
                <!-- <img
                  v-if="item.main_images && item.main_images.length > 0"
                  :src="proxy.$buildUrl(item.main_images[0].url)"
                  alt=""
                  class="carousel-image" /> -->
                <img :src="proxy.$buildUrl(item.white_back_ground_pic_url)" alt="" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

    <!-- 介绍图片区域 -->
    <div class="intro-images-section" v-if="!isMobile">
      <div class="intro-images-container">
        <img :src="item" alt="" v-for="(item, index) in introImages" :key="index" class="intro-image" />
      </div>
    </div>
    <div v-else class="intro-images-section">
      <img src="@/assets/m/mobile-service.png" alt="" />
    </div>

    <div class="mobile-category-wrap" v-else>
      <div class="flex flex-wrap justify-start items-start">
        <div v-for="(category, index) in mobileProductCategories" :key="index" class="mobile-category-item">
          <div class="icon">
            <img :src="proxy.$buildUrl(category.group_icon)" alt="" />
          </div>
          <span>{{ category.group_name }}</span>
        </div>
      </div>
    </div>

    <!-- 优惠券图片区域 -->
    <div class="coupon-images-section" v-if="!isMobile">
      <div class="coupon-images-container">
        <div v-for="(item, index) in couponList" :key="index" @click="toCoupon" class="coupon-card">
          <div class="coupon-left">
            <div class="coupon-amount">
              <span class="currency" v-if="item.content_type === 1 || item.content_type === 2">¥</span>
              <span class="amount" v-if="item.content_type === 1 || item.content_type === 2">{{ item.coupon_amount }}</span>
              <span class="amount" v-else-if="item.content_type === 3">{{ item.coupon_amount }}折</span>
            </div>
            <div class="coupon-condition" v-if="item.content_type === 1">优惠券满{{ item.threshold }}元使用</div>
            <div class="coupon-condition" v-else-if="item.content_type === 2">商品立减券</div>
            <div class="coupon-condition" v-else-if="item.content_type === 3">商品折扣券</div>
          </div>
          <div class="coupon-right">
            <div class="coupon-action">立即领取</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 茶叶产品展示区域 -->
    <template v-if="!isMobile">
      <div class="product-section container">
        <div class="section-header">
          <h3>活动热卖</h3>
          <el-button type="default" class="more-btn" @click="toCategory">查看更多 >></el-button>
        </div>
      </div>
      <div class="tea-products-section">
        <div class="container">
          <div class="tea-products-grid">
            <div
              class="tea-product-card"
              v-for="(product, index) in teaProducts"
              :key="index"
              :style="{ backgroundImage: `url(${proxy.$buildUrl(product.white_back_ground_pic_url)})` }"
              @click="toDetail(product)">
              <div class="tea-product-content">
                <h3 class="tea-product-title">{{ product.spu_name }}</h3>
                <p class="tea-product-desc">{{ product.sku_name }}</p>
                <div class="tea-product-footer">
                  <span class="tea-product-price">￥{{ product.price_min }}</span>
                  <button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="product-section container">
        <div class="section-header">
          <h3>活动热卖</h3>
          <el-button type="default" class="more-btn" @click="toCategory">解锁更多活动 >></el-button>
        </div>
      </div>
      <div class="tea-products-section">
        <div class="container">
          <div class="tea-products-grid">
            <div
              class="tea-product-card"
              v-for="(product, index) in teaProducts"
              :key="index"
              :style="{ backgroundImage: `url(${proxy.$buildUrl(product.white_back_ground_pic_url)})` }"
              @click="toDetail(product)">
              <div class="tea-product-content">
                <h3 class="tea-product-title">{{ product.spu_name }}</h3>
                <p class="tea-product-desc">{{ product.sku_name }}</p>
                <div class="tea-product-footer">
                  <span class="tea-product-price">￥{{ product.price_min }}</span>
                  <button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 新品上市 -->
    <div class="product-section container">
      <div class="section-header">
        <h3>新品上市</h3>
        <el-button type="default" class="more-btn" @click="toCategory">查看更多 >></el-button>
      </div>
    </div>
    <div class="tea-products-section">
      <div class="container">
        <div class="tea-products-grid">
          <div
            class="tea-product-card"
            v-for="(product, index) in newProducts"
            :key="index"
            :style="{ backgroundImage: `url(${proxy.$buildUrl(product.white_back_ground_pic_url)})` }"
            @click="toDetail(product)">
            <div class="tea-product-content">
              <h3 class="tea-product-title">{{ product.spu_name }}</h3>
              <p class="tea-product-desc">{{ product.sku_name }}</p>
              <div class="tea-product-footer">
                <span class="tea-product-price">￥{{ product.price_min }}</span>
                <button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="coupon-images-section" v-if="isMobile">
      <div class="coupon-images-container">
        <div v-for="(item, index) in couponList" :key="index" @click="toCoupon" class="coupon-card">
          <div class="coupon-left">
            <div class="coupon-amount">
              <span class="currency">¥</span>
              <span class="amount" v-if="item.content_type === 1 || item.content_type === 2">{{ item.coupon_amount }}</span>
              <span class="amount" v-else-if="item.content_type === 3">{{ item.coupon_amount }}折</span>
            </div>
            <div class="coupon-condition" v-if="item.content_type === 1">优惠券满{{ item.threshold }}元使用</div>
            <div class="coupon-condition" v-else-if="item.content_type === 2">商品立减券</div>
            <div class="coupon-condition" v-else-if="item.content_type === 3">商品折扣券</div>
          </div>
          <div class="coupon-right">
            <div class="coupon-action">立即领取</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 茶叶产品横幅展示模块 -->
    <block v-for="(item, index) in showcaseProducts" :key="index">
      <block v-if="item.itemArray && item.itemArray.length > 0">
        <!-- 系列标题名称 -->
        <div class="product-section container">
          <div class="section-header">
            <h3>{{ item.group_name }}</h3>
            <el-button type="default" class="more-btn" @click="toCategory(item)">查看更多 >></el-button>
          </div>
        </div>
        <!-- 产品数据列表 -->
        <template v-if="item.show_type === 1">
          <!-- 轮播模式 -->
          <div class="tea-products-section">
            <div class="container">
              <div class="tea-products-grid">
                <div
                  class="tea-product-card"
                  v-for="(product, productIndex) in item.itemArray"
                  :key="productIndex"
                  :style="{ backgroundImage: `url(${proxy.$buildUrl(product.white_back_ground_pic_url)})` }"
                  @click="toDetail(product)">
                  <div class="tea-product-content">
                    <h3 class="tea-product-title">{{ product.spu_name }}A</h3>
                    <p class="tea-product-desc">{{ product.sku_name }}</p>
                    <div class="tea-product-footer">
                      <span class="tea-product-price">￥{{ product.price_min }}</span>
                      <button class="tea-product-btn" @click.stop="toBuyNow(product)">立即购买</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="item.show_type === 2">
          <!-- 横幅模式 -->
          <div class="tea-banner-section" @click="toDetail(item.itemArray[0])">
            <div class="tea-banner-container" :style="{ backgroundImage: `url(${proxy.$buildUrl(item.back_ground_image)})` }">
              <div class="tea-banner-content">
                <div class="tea-banner-text" style="color: #fff">
                  <h3 class="tea-banner-title">{{ item.itemArray[0].spu_name }}</h3>
                  <p class="tea-banner-subtitle">{{ item.itemArray[0].short_spu_name }}</p>
                  <p class="tea-banner-subtitle">{{ item.itemArray[0].sku_name }}</p>
                  <div class="tea-banner-price">¥{{ item.itemArray[0].price_min }}元/盒</div>
                  <button class="tea-banner-btn" @click.stop="toBuyNow(item.itemArray[0])">立即购买</button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.itemArray.length > 1" class="products-showcase-section">
            <div class="products-showcase-container">
              <div
                class="product-showcase-item"
                v-for="(product, productIndex) in item.itemArray.slice(1)"
                :key="productIndex"
                @click="toDetail(product)">
                <div class="product-showcase-image">
                  <img :src="proxy.$buildUrl(product.white_back_ground_pic_url)" :alt="product.spu_name" />
                </div>
                <div class="product-showcase-content">
                  <h3 class="product-showcase-title">{{ product.spu_name }}</h3>
                  <p class="product-showcase-desc">{{ product.sku_name }}</p>
                  <div class="product-showcase-footer">
                    <span class="product-showcase-price">¥{{ product.price_min }}</span>
                    <button class="product-showcase-cart-btn">
                      <img src="@/assets/images/cart-green.png" alt="购物车" v-if="!isMobile" />
                      <img src="@/assets/m/cart-orange.png" alt="购物车" v-else />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="item.show_type === 3">
          <!-- 双列模式：如片刻闲系列 -->
          <div class="tea-banner-section-pk" v-if="!isMobile">
            <div
              class="tea-banner-container"
              :style="{ backgroundImage: `url(${proxy.$buildUrl(item.back_ground_image)})` }"
              @click="toDetail(item.itemArray[0])">
              <div class="tea-banner-content">
                <div class="tea-banner-text">
                  <h3 class="tea-banner-title" style="font-size: 28px">{{ item.itemArray[0].spu_name }}</h3>
                  <p class="tea-banner-subtitle">{{ item.itemArray[0].short_spu_name }}</p>
                  <p class="tea-banner-subtitle">{{ item.itemArray[0].sku_name }}</p>
                  <div class="tea-banner-price">¥ {{ item.itemArray[0].price_min }}元/盒</div>
                  <button class="tea-banner-btn">立即购买</button>
                </div>
              </div>
            </div>
            <div class="product-list" style="align-items: flex-end; margin-left: 20px">
              <div v-for="(product, productIndex) in item.itemArray.slice(1)" :key="productIndex" class="item" @click="toDetail(product)">
                <img :src="proxy.$buildUrl(product.white_back_ground_pic_url)" alt="" />
                <div class="content-wrap">
                  <h3>{{ product.spu_name }}</h3>
                  <p class="desc">{{ product.sku_name }}</p>
                  <div class="flex justify-between items-center w-full">
                    <span class="price">¥{{ product.price_min }}元/盒</span>
                    <span class="buy-text">立即购买>></span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-else class="tea-banner-section-pk-mobile">
            <div class="wrap">
              <div v-for="(product, productIndex) in item.itemArray" :key="productIndex" class="item" @click="toDetail(product)">
                <img :src="proxy.$buildUrl(product.white_back_ground_pic_url)" alt="" />
                <div class="content">
                  <p>{{ product.spu_name }}</p>
                  <div class="flex justify-between items-center w-full">
                    <span class="price">¥{{ product.price_min }}</span>
                    <div class="tag">GO ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="item.show_type === 4">
          <!-- 单列模式：如定制系列 -->
          <div class="special-tea-section" v-if="!isMobile">
            <div class="container">
              <div class="special-tea-content">
                <div class="tea-product-card" v-for="(product, productIndex) in item.itemArray" :key="productIndex" @click="toDetail(product)">
                  <div
                    class="product-image-container"
                    :style="{
                      backgroundImage: `url(${proxy.$buildUrl(
                        product.main_images && product.main_images.length > 0 ? product.main_images[0].url : product.white_back_ground_pic_url
                      )})`,
                    }">
                    <div class="product-info">
                      <h3 class="product-title">{{ product.spu_name }}</h3>
                      <p class="product-description">{{ product.sku_name }}</p>
                      <h3 class="product-description price">¥{{ product.price_min }}</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="special-tea-section-mobile" v-else>
            <div class="special-tea-container-mobile">
              <div class="tea-product-card" v-for="(product, productIndex) in item.itemArray" :key="productIndex" @click="toDetail(product)">
                <div class="product-info">
                  <h3 class="product-title">{{ product.spu_name }}</h3>
                  <p class="product-description">{{ product.sku_name }}</p>
                  <h3 class="product-description price">¥{{ product.price_min }}</h3>
                </div>
                <img :src="proxy.$buildUrl(product.white_back_ground_pic_url)" alt="" />
              </div>
            </div>
          </div>
        </template>
      </block>
    </block>

    <Footer v-if="!isMobile" />

    <!-- 移动端底部导航栏 -->
    <BottomNavbar v-if="isMobile" />

    <!-- 移动端底部间距 -->
    <div class="navbar-spacer" v-if="isMobile"></div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted, onUnmounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import Header from '@/components/Header.vue'
  import Footer from '@/components/Footer.vue'
  import BottomNavbar from '@/components/BottomNavbar.vue'
  import apiGood from '@/api/modules/good'
  import apiCoupon from '@/api/modules/coupon'
  import { useUserStore } from '@/stores/user.js'

  const { proxy } = getCurrentInstance()
  const userStore = useUserStore()
  const isMobile = ref(false)
  const deviceInfo = ref({
    type: '',
    os: '',
    browser: '',
    screenWidth: 0,
  })

  const getDeviceInfo = () => {
    const userAgent = navigator.userAgent.toLowerCase()
    const screenWidth = window.innerWidth

    // 检测操作系统
    let os = 'Unknown'
    if (userAgent.includes('android')) os = 'Android'
    else if (userAgent.includes('iphone') || userAgent.includes('ipad')) os = 'iOS'
    else if (userAgent.includes('windows')) os = 'Windows'
    else if (userAgent.includes('mac')) os = 'macOS'
    else if (userAgent.includes('linux')) os = 'Linux'

    // 检测浏览器
    let browser = 'Unknown'
    if (userAgent.includes('chrome')) browser = 'Chrome'
    else if (userAgent.includes('firefox')) browser = 'Firefox'
    else if (userAgent.includes('safari')) browser = 'Safari'
    else if (userAgent.includes('edge')) browser = 'Edge'

    // 检测设备类型
    let type = 'Desktop'
    if (userAgent.includes('mobile') || screenWidth <= 768) type = 'Mobile'
    else if (userAgent.includes('tablet') || (screenWidth > 768 && screenWidth <= 1024)) type = 'Tablet'

    deviceInfo.value = { type, os, browser, screenWidth }

    return { type, os, browser, screenWidth }
  }

  // 检测是否为移动设备
  const checkMobile = () => {
    const { type, screenWidth } = getDeviceInfo()
    const userAgent = navigator.userAgent.toLowerCase()

    // 更精确的移动设备检测
    const mobileKeywords = ['mobile', 'android', 'iphone', 'ipod', 'blackberry', 'windows phone']
    const tabletKeywords = ['ipad', 'tablet']

    const isMobileDevice = mobileKeywords.some((keyword) => userAgent.includes(keyword))
    const isTabletDevice = tabletKeywords.some((keyword) => userAgent.includes(keyword))
    const isSmallScreen = screenWidth <= 768
    const isMediumScreen = screenWidth > 768 && screenWidth <= 1024

    // 移动设备或小屏幕显示移动端界面
    // 平板设备根据屏幕宽度决定
    isMobile.value = isMobileDevice || isSmallScreen || (isTabletDevice && isMediumScreen)
  }
  checkMobile()

  const scroll = ref(false)
  window.addEventListener('scroll', () => {
    // 顶部
    scroll.value = window.scrollY > 0
  })

  const router = useRouter()

  const toDetail = (product) => {
    // 滚动到顶部
    // window.scrollTo(0, 0)
    // router.push({
    //   path: '/detail',
    //   query: {
    //     id: product?.id,
    //   },
    // })

    // 先通过路由器的resolve方法解析出目标路由的URL
    const route = router.resolve({ path: '/detail', query: { id: product?.id } })
    // 然后使用window.open打开新窗口
    window.open(route.href, '_blank')
  }

  const toCategory = (category) => {
    // 滚动到顶部
    window.scrollTo(0, 0)
    router.push({
      path: '/category',
      query: {
        id: category?.id,
      },
    })
  }

  const toCoupon = () => {
    // 滚动到顶部
    window.scrollTo(0, 0)
    router.push({
      path: '/coupon',
    })
  }

  // 立即购买方法
  const toBuyNow = (product) => {
    // 滚动到顶部
    // window.scrollTo(0, 0)
    // router.push({
    //   path: '/detail',
    //   query: {
    //     id: product?.id,
    //   },
    // })

    // 先通过路由器的resolve方法解析出目标路由的URL
    const route = router.resolve({ path: '/detail', query: { id: product?.id } })
    // 然后使用window.open打开新窗口
    window.open(route.href, '_blank')
  }

  // 产品分类数据
  const tabIndex = ref(-1)
  const productCategories = ref([])
  // 茶叶产品数据（轮播）
  const lunboProducts = ref([])
  // 茶叶产品数据（热卖）
  const teaProducts = ref([])
  // 茶叶产品数据（新品）
  const newProducts = ref([])
  // 产品展示数据（分系列）
  const showcaseProducts = ref([])
  // 平台优惠券
  const couponList = ref([])
  // 从store获取用户状态（保持响应性）
  const companyId = computed(() => userStore.companyId)
  const dealerInfo = computed(() => userStore.dealerInfo)

  // 组件挂载时获取数据
  onMounted(async () => {
    if (!(companyId.value && companyId.value !== '') || !(dealerInfo.value.id && dealerInfo.value.id !== '')) {
      await userStore.getCompanyInfo()
    }
    loadProductGroup()
    loadCouponList()
    loadProductLunBo()
    loadProductHot()
    loadProductNew()
    loadProductHome()
  })

  function loadProductGroup() {
    apiGood.GetProductGroup().then(async (res) => {
      productCategories.value = res.data
    })
  }

  function loadCouponList() {
    apiCoupon.GetPubCouponList({ page: 1, limit: 4 }).then(async (res) => {
      couponList.value = res.data
    })
  }

  function loadProductLunBo() {
    apiGood.GetProductLunBo().then(async (res) => {
      res.data.forEach((item) => {
        item.main_images = proxy.$parseJsonObject(item.main_images)
      })
      lunboProducts.value = res.data
    })
  }

  function loadProductHot() {
    apiGood.GetProductHot({ limit: 3 }).then(async (res) => {
      res.data.forEach((item) => {
        item.main_images = proxy.$parseJsonObject(item.main_images)
      })
      teaProducts.value = res.data
    })
  }

  function loadProductNew() {
    apiGood.GetProductNew({ limit: 3 }).then(async (res) => {
      res.data.forEach((item) => {
        item.main_images = proxy.$parseJsonObject(item.main_images)
      })
      newProducts.value = res.data
    })
  }

  function loadProductHome() {
    apiGood.GetProductHome().then(async (res) => {
      res.data.forEach((item) => {
        item.itemArray.forEach((product) => {
          product.main_images = proxy.$parseJsonObject(product.main_images)
        })
      })
      showcaseProducts.value = res.data
    })
  }

  function switchCategories(index) {
    tabIndex.value = index
    const group_id = productCategories.value[index].id
    const newlist = showcaseProducts.value.find((o) => o.id === group_id)
    if (newlist) {
      newlist.itemArray.forEach((item) => {
        item.main_images = proxy.$parseJsonObject(item.main_images)
      })
      lunboProducts.value = newlist.itemArray
    }
  }

  // 服务保障介绍区域
  import introImage0 from '@/assets/images/intro/0.png'
  import introImage1 from '@/assets/images/intro/1.png'
  import introImage2 from '@/assets/images/intro/2.png'
  import introImage3 from '@/assets/images/intro/3.png'
  const introImages = [introImage0, introImage1, introImage2, introImage3]
</script>

<style scoped>
  .home-container {
    width: 100%;
  }

  /* 产品展示区域 */
  .product-showcase {
    margin-top: 0;
    padding: 0;
  }

  .showcase-content {
    display: flex;
    min-height: 500px;
  }

  /* 左侧分类菜单 */
  .category-menu {
    width: 200px;
    background-color: #1c705e;
    padding: 0;
    flex-shrink: 0;
  }

  .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .category-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .category-name {
    font-size: 14px;
    font-weight: 500;
  }

  .category-arrow {
    font-size: 12px;
    opacity: 0.8;
  }

  /* 右侧产品展示 */
  .carousel-container {
    flex: 1;
    width: 100%;
  }

  .main-carousel {
    width: 100%;
    height: 533px;
  }

  .carousel-item {
    height: 533px;
    width: 100%;
  }

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-display {
    flex: 1;
    background: url('@/assets/images/商城PC端4（无字）_03.jpg') no-repeat;
    background-size: cover;
    position: relative;
  }

  .product-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 40px 60px;
  }

  .product-text {
    flex: 1;
    padding-right: 40px;
  }

  .product-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
  }

  .product-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  .order-btn {
    background-color: white;
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .order-btn:hover {
    background-color: #459a7e;
  }

  .product-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
  }

  /* 介绍图片区域 */
  .intro-images-section {
    margin: 20px 0;
    padding: 0 20px;
  }

  .intro-images-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
  }

  .intro-image {
    flex: 0 0 260px;
    width: 260px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
  }

  /* 优惠券图片区域 */
  .coupon-images-section {
    max-width: 1200px;
    margin: 20px auto;
    display: flex;
    gap: 18px;
    justify-content: start;
    padding: 0 12px;
  }

  .coupon-images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .coupon-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f9e79f 0%, #f7dc6f 50%, #f4d03f 100%);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    height: 100px;
    min-width: 280px;
    border: 1px solid #f1c40f;
  }

  .coupon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .coupon-left {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .coupon-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
  }

  .currency {
    font-size: 16px;
    font-weight: bold;
    color: #d35400;
    margin-right: 2px;
  }

  .amount {
    font-size: 32px;
    font-weight: bold;
    color: #d35400;
    line-height: 1;
  }

  .coupon-condition {
    font-size: 12px;
    color: #8b4513;
    line-height: 1.2;
  }

  .coupon-right {
    background-color: #27ae60;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    position: relative;
    border-radius: 0 8px 8px 0;
  }

  .coupon-right::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #27ae60;
  }

  .coupon-action {
    color: white;
    font-size: 13px;
    font-weight: bold;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
  }

  /* 茶叶产品展示区域 */
  .tea-products-section {
  }

  .tea-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .tea-product-card {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
  }

  .tea-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .tea-product-content {
    padding: 25px;
    color: white;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  }

  .tea-product-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .tea-product-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .tea-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tea-product-price {
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .tea-product-btn {
    background-color: white;
    color: #52a58a;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .tea-product-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  /* 茶叶产品横幅展示模块 */
  .tea-banner-section {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .tea-banner-container {
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 12px;
    cursor: pointer;
  }

  .tea-banner-content {
    padding: 60px 40px;
    max-width: 500px;
  }

  .tea-banner-text {
    color: white;
  }

  .tea-banner-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .tea-banner-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    opacity: 0.95;
  }

  .tea-banner-price {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
  }

  .tea-banner-btn {
    background-color: white;
    color: #333;
    border: none;
    padding: 15px 35px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .tea-banner-btn:hover {
    background-color: #52a58a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  .tea-banner-section-pk {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .tea-banner-container {
      height: 680px;
      margin-bottom: 10px;
      flex: 0 0 300px;
    }

    .tea-banner-content {
      height: 100%;
    }

    .product-list {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      .item {
        width: 31%;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0 10px 10px 0;
        background-color: white;
        cursor: pointer;

        .content-wrap {
          padding: 20px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;
          width: 100%;

          h3 {
            padding: 0;
            margin: 0;
          }

          .desc {
            font-size: 14px;
            color: #999;
            line-height: 1.5;
            margin-bottom: 10px;
          }

          .price {
            font-size: 14px;
            color: #333;
          }

          .buy-text {
            font-size: 14px;
            color: #1c705e;
          }
        }
      }

      .item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }
    }
  }

  .tea-banner-section-pk-mobile {
    background: url('@/assets/m/pkx-bg.png');
    border-radius: 12px;
    padding: 10px 0;
    position: relative;
    background-size: cover;

    .wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 100px;

      .item {
        flex: 0 0 45%;
        margin: 5px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: white;

        img {
          border-radius: 12px 12px 0 0;
        }

        .content {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding: 10px;
          width: 100%;

          p {
            margin: 0;
          }

          .tag {
            color: #dbc2a9;
            background-color: black;
            border-radius: 10px;
            padding: 2px 4px;
            font-size: 12px;
          }
        }
      }
    }
  }

  /* 产品展示区域样式 */
  .products-showcase-section {
    width: 100%;
    margin: 10px 0;
    padding: 0 20px;
  }

  .products-showcase-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 0 20px;
  }

  .product-showcase-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    cursor: pointer;
  }

  .product-showcase-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .product-showcase-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .product-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .product-showcase-item:hover .product-showcase-image img {
    transform: scale(1.05);
  }

  .product-showcase-content {
    padding: 15px;
  }

  .product-showcase-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .product-showcase-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-showcase-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-showcase-price {
    font-size: 16px;
    font-weight: bold;
    color: #666;
  }

  .product-showcase-cart-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }

  .product-showcase-cart-btn:hover {
    background-color: #f0f0f0;
  }

  .product-showcase-cart-btn img {
    width: 20px;
    height: 20px;
  }

  .mobile-category-wrap {
    background-color: white;
    margin: 10px;
    border-radius: 12px;
  }

  .mobile-category-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0 0 20%;
    padding: 5px;

    .icon {
      background-color: #1c705e;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      padding: 10px;

      img {
        width: 60%;
        height: 60%;
      }
    }

    span {
      margin-top: 5px;
      font-size: 12px;
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .tea-products-grid {
      grid-template-columns: 1fr;
      gap: 15px;
      padding: 0 15px;
    }

    .tea-product-card {
      height: 350px;
    }

    .tea-product-content {
      padding: 20px;
    }

    .tea-product-title {
      font-size: 18px;
    }

    .tea-product-desc {
      font-size: 13px;
    }

    .tea-product-price {
      font-size: 16px;
    }

    /* 移动端优惠券样式 */
    .coupon-images-container {
      flex-direction: column;
      gap: 15px;
    }

    .coupon-card {
      min-width: auto;
      width: 100%;
      height: 80px;
    }

    .coupon-left {
      padding: 15px;
    }

    .amount {
      font-size: 24px;
    }

    .currency {
      font-size: 14px;
    }

    .coupon-condition {
      font-size: 11px;
    }

    .coupon-right {
      padding: 0 15px;
    }

    .coupon-action {
      font-size: 12px;
    }

    /* 茶叶横幅移动端适配 */
    .tea-banner-section {
      width: 100%;
      padding: 15px;
    }

    .tea-banner-container {
      height: 300px;
    }

    .tea-banner-content {
      padding: 30px 20px;
    }

    .tea-banner-title {
      font-size: 24px;
      line-height: 1.3;
    }

    .tea-banner-subtitle {
      font-size: 14px;
      margin-bottom: 20px;
    }

    .tea-banner-price {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .tea-banner-btn {
      padding: 10px 20px;
      font-size: 14px;
    }

    /* 片刻闲系列移动端适配 */
    .tea-banner-section-pk {
      width: 100%;
      padding: 15px;
      flex-direction: column;
    }

    .tea-banner-section-pk .tea-banner-container {
      flex: none;
      width: 100%;
      height: 250px;
      margin-bottom: 20px;
    }

    .tea-banner-section-pk .product-list {
      width: 100%;
    }

    .tea-banner-section-pk .product-list .item {
      width: 100%;
      margin: 0 0 15px 0;
      flex-direction: row;
      border: 1px solid #ddd;
    }

    .tea-banner-section-pk .product-list .item img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 8px;
    }

    .tea-banner-section-pk .product-list .item .content-wrap {
      padding: 15px;
      flex: 1;
    }

    .tea-banner-btn {
      padding: 12px 25px;
      font-size: 14px;
    }

    .products-showcase-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }

    .product-showcase-image {
      height: 150px;
    }

    .product-showcase-content {
      padding: 12px;
    }

    .product-showcase-title {
      font-size: 14px;
    }

    .product-showcase-desc {
      font-size: 11px;
    }

    .product-showcase-price {
      font-size: 14px;
    }

    .product-showcase-cart-btn img {
      width: 18px;
      height: 18px;
    }
  }

  /* 产品区域通用样式 */
  .product-section,
  .category-section {
    margin: 40px auto 20px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .section-header h3 {
    font-size: 1.8rem;
    color: #333;
    margin: 0;
  }

  .more-btn {
    color: #666;
  }

  .product-info {
    padding: 15px;
  }

  .product-title {
    font-weight: bold;
    margin-bottom: 8px;
  }

  .product-price {
    color: #e53935;
    font-weight: bold;
  }

  /* 特色茶叶展示区域 */
  .special-tea-section {
    padding: 0 0 40px 0;
  }

  .special-tea-content {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;

    .tea-product-card {
      flex: 1;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      box-shadow: none;
    }

    .tea-product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .product-image-container {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      transition: transform 0.3s ease;
    }

    .tea-product-card:hover .product-image-container {
      transform: scale(1.02);
    }

    .product-info {
      color: white;
      padding: 20px 25px 25px;
      text-align: center;
      width: 100%;
    }

    .product-title {
      font-size: 20px;
      font-weight: 600;
      color: white;
      margin-bottom: 12px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      text-align: left;
    }

    .product-description {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.6;
      margin: 0;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      text-align: left;
    }
  }

  .special-tea-section-mobile {
    background: url('@/assets/m/pkx-bg.png');
    border-radius: 12px;
    padding: 10px;
    position: relative;
    background-size: cover;

    .special-tea-container-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-top: 100px;

      .tea-product-card {
        background-color: white;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        height: auto;

        img {
          width: 100px;
          height: 100px;
        }

        .product-info {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;

          .product-description {
            color: #999;
            font-size: 12px;
          }
        }
      }
    }
  }

  /* 响应式调整 */
  @media (max-width: 1024px) {
    .products-showcase-container {
      grid-template-columns: repeat(4, 1fr);
    }

    .special-tea-content {
      gap: 20px;
    }
  }

  @media (max-width: 768px) {
    .home-container {
      padding: 0;
      background-color: #f5f5f5;
    }

    .showcase-content {
      flex-direction: column;
      min-height: auto;
    }

    .category-menu {
      width: 100%;
      display: flex;
      overflow-x: auto;
      background-color: #52a58a;
      padding: 10px 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .category-menu::-webkit-scrollbar {
      display: none;
    }

    .category-item {
      white-space: nowrap;
      padding: 10px 15px;
      border-bottom: none;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      min-width: 120px;
      justify-content: center;
    }

    .category-item:last-child {
      border-right: none;
    }

    .category-arrow {
      display: none;
    }

    /* 轮播图移动端适配 */
    .carousel-container {
      width: 100%;
    }

    .main-carousel {
      height: 250px;
    }

    .carousel-item {
      height: 250px;
    }

    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: fill;
      border-radius: 12px;
    }

    /* 介绍图片移动端适配 */
    .intro-images-container {
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
    }

    .intro-image {
      flex: 0 0 calc(50% - 10px);
      width: calc(50% - 10px);
      max-width: 180px;
    }

    .product-title {
      font-size: 24px;
    }

    .products-showcase-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .special-tea-content {
      flex-direction: column;
      gap: 15px;
    }

    .product-image-container {
      height: 280px;
    }
  }

  @media (max-width: 480px) {
    .home-container {
      padding: 0;
    }

    .category-menu {
      padding: 8px 0;
    }

    .category-item {
      padding: 8px 12px;
      min-width: 100px;
      font-size: 13px;
    }

    /* 轮播图超小屏适配 */
    .main-carousel {
      height: 200px;
    }

    .carousel-item {
      height: 200px;
    }

    /* 介绍图片超小屏适配 */
    .intro-images-section {
      padding: 0 15px;
    }

    .intro-images-container {
      gap: 10px;
    }

    .intro-image {
      flex: 0 0 calc(50% - 5px);
      width: calc(50% - 5px);
      max-width: 150px;
    }

    /* 优惠券图片超小屏适配 */
    .coupon-images-section {
      padding: 0 15px;
    }

    .coupon-card {
      height: 70px;
      min-width: auto;
    }

    .coupon-left {
      padding: 10px;
    }

    .amount {
      font-size: 20px;
    }

    .currency {
      font-size: 12px;
    }

    .coupon-condition {
      font-size: 10px;
    }

    .coupon-right {
      padding: 0 12px;
    }

    .coupon-action {
      font-size: 11px;
    }

    .product-title {
      font-size: 20px;
    }

    /* 茶叶横幅超小屏适配 */
    .tea-banner-section {
      padding: 0 15px;
    }

    .tea-banner-container {
      height: 250px;
    }

    .tea-banner-content {
      padding: 20px 15px;
    }

    .tea-banner-title {
      font-size: 20px;
    }

    .tea-banner-subtitle {
      font-size: 13px;
      margin-bottom: 15px;
    }

    .tea-banner-price {
      font-size: 16px;
      margin-bottom: 15px;
    }

    .tea-banner-btn {
      padding: 8px 16px;
      font-size: 13px;
    }

    /* 片刻闲系列超小屏适配 */
    .tea-banner-section-pk {
      padding: 10px;
    }

    .tea-banner-section-pk .tea-banner-container {
      height: 200px;
    }

    .tea-banner-section-pk .product-list .item {
      flex-direction: column;
      text-align: center;
      border: 1px solid #ddd;
    }

    .tea-banner-section-pk .product-list .item img {
      width: 100%;
      height: 140px;
      margin-bottom: 10px;
    }

    .tea-banner-section-pk .product-list .item .content-wrap {
      padding: 10px;
    }

    .products-showcase-container {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .special-tea-section {
      padding: 40px 0;
    }

    .product-info {
      padding: 20px;
    }

    .product-title {
      font-size: 18px;
    }

    .product-description {
      font-size: 13px;
    }

    .product-image-container {
      height: 250px;
    }

    .product-info {
      padding: 30px 20px 20px;
    }

    .tea-products-section .container .tea-products-grid {
      overflow-x: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      max-width: 100vw;

      .tea-product-card {
        flex: 0 0 250px;

        .tea-product-price {
          color: #ffbd37;
          text-shadow: none;
          font-size: 18px;
        }

        .tea-product-btn {
          background-color: #f9ecd1;
          color: black;
        }
      }
    }

    .coupon-images-container {
      overflow-x: scroll;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: row;
      gap: 10px;

      .coupon-card {
        flex: 0 0 250px;
        width: 250px;
        min-width: 250px;
        height: 70px;
      }
    }

    .products-showcase-section {
      padding: 15px;

      .products-showcase-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0;

        .product-showcase-item {
          flex: 0 0 calc(50% - 10px);

          .product-showcase-price {
            color: #ffac0c;
          }
        }
      }
    }
  }

  /* 移动端底部导航栏间距 */
  .navbar-spacer {
    height: 70px;
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
